<template>
    <div>
        <page-header title="loading 动画" content="基于 SpinKit ，可自行将其封装成组件，方便调用">
            <el-button icon="el-icon-link" @click="open('https://tobiasahlin.com/spinkit/')">SpinKit 官网</el-button>
        </page-header>
        <page-main>
            <el-form>
                <el-form-item label="类型">
                    <el-radio-group v-model="type">
                        <el-radio-button label="Plane" />
                        <el-radio-button label="Chase" />
                        <el-radio-button label="Wave" />
                        <el-radio-button label="Pulse" />
                        <el-radio-button label="Flow" />
                        <el-radio-button label="Swing" />
                        <el-radio-button label="Circle" />
                        <el-radio-button label="Circle Fade" />
                        <el-radio-button label="Grid" />
                        <el-radio-button label="Fold" />
                        <el-radio-button label="Wander" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="尺寸">
                    <el-input-number v-model="size" controls-position="right" :min="20" :max="200" :step="10" />
                </el-form-item>
                <el-form-item label="颜色">
                    <el-color-picker v-model="color" />
                </el-form-item>
                <el-form-item>
                    <div :style="{'--sk-size': `${size}px`, '--sk-color': color}">
                        <div v-if="type == 'Plane'" class="sk-plane" />
                        <div v-if="type == 'Chase'" class="sk-chase">
                            <div class="sk-chase-dot" />
                            <div class="sk-chase-dot" />
                            <div class="sk-chase-dot" />
                            <div class="sk-chase-dot" />
                            <div class="sk-chase-dot" />
                            <div class="sk-chase-dot" />
                        </div>
                        <div v-if="type == 'Bounce'" class="sk-bounce">
                            <div class="sk-bounce-dot" />
                            <div class="sk-bounce-dot" />
                        </div>
                        <div v-if="type == 'Wave'" class="sk-wave">
                            <div class="sk-wave-rect" />
                            <div class="sk-wave-rect" />
                            <div class="sk-wave-rect" />
                            <div class="sk-wave-rect" />
                            <div class="sk-wave-rect" />
                        </div>
                        <div v-if="type == 'Pulse'" class="sk-pulse" />
                        <div v-if="type == 'Flow'" class="sk-flow">
                            <div class="sk-flow-dot" />
                            <div class="sk-flow-dot" />
                            <div class="sk-flow-dot" />
                        </div>
                        <div v-if="type == 'Swing'" class="sk-swing">
                            <div class="sk-swing-dot" />
                            <div class="sk-swing-dot" />
                        </div>
                        <div v-if="type == 'Circle'" class="sk-circle">
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                            <div class="sk-circle-dot" />
                        </div>
                        <div v-if="type == 'Circle Fade'" class="sk-circle-fade">
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                            <div class="sk-circle-fade-dot" />
                        </div>
                        <div v-if="type == 'Grid'" class="sk-grid">
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                            <div class="sk-grid-cube" />
                        </div>
                        <div v-if="type == 'Fold'" class="sk-fold">
                            <div class="sk-fold-cube" />
                            <div class="sk-fold-cube" />
                            <div class="sk-fold-cube" />
                            <div class="sk-fold-cube" />
                        </div>
                        <div v-if="type == 'Wander'" class="sk-wander">
                            <div class="sk-wander-cube" />
                            <div class="sk-wander-cube" />
                            <div class="sk-wander-cube" />
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </page-main>
    </div>
</template>

<script>
import 'spinkit/spinkit.min.css'

export default {
    data() {
        return {
            type: 'Plane',
            size: 50,
            color: null
        }
    },
    methods: {
        open(url) {
            window.open(url, 'top')
        }
    }
}
</script>
